<template>
	<div id="detailContainer" class="slide">
		<Header title="影片详情">
			<i @click="$router.back()" class="back iconfont icon-zuojiantou"></i>
		</Header>
		<Loading v-if="isLoading"/>
		<div v-else id="content" class="contentDetail">
			<div>
				<input type="radio" @click="tapInput()">
				<input type="text" disabled ref="ipt">
			</div>

			<div class="detail_list">
				<div class="detail_list_bg" :style="{'background-image':'url('+movie.img.replace(/w\.h/,'148.208')+')'}"></div>
				<div class="detail_list_filter"></div>
				<div class="detail_list_content">
					<div class="detail_list_img">
						<img :src="movie.img | setWH('148.208')" alt="">
					</div>
					<div class="detail_list_info">
						<h2>{{movie.nm}}</h2>
						<p>{{movie.enm}}</p>
						<p>{{movie.sc}}</p>
						<p>{{movie.cat}}</p>
						<p>{{movie.fra}} / {{movie.dur}}分钟</p>
						<p>{{movie.pubDesc}}</p>
					</div>
				</div>
			</div>
			<div class="detail_intro">
				<p>{{movie.dra}}</p>
			</div>
			<div class="detail_player swiper-container">
				<swiper class="swiper-wrapper" ref='mySwiper' :options="swiperOptions">
					<swiper-slide v-for="(item,index) in movie.photos" :key="index" class="swiper-slide">
						<div>
							<img preview :src="item | setWH('140.127')" alt="">
						</div>
					</swiper-slide>
				</swiper>
			</div>
		</div>
	</div>
</template>

<script>
	import Header from '@/components/Header/Header.vue'
	import {
		setWH
	} from '@/filter/index.js'
	export default {
		props: {
			movieId: {
				type: String
			}
		},
		data() {
			return {
				movie: {},
				swiperOptions: {
					slidesPerView:'auto'
					// Some Swiper option/callback...
				},
				isLoading:true,
				isFlag:false
			}
		},
		methods:{
			tapInput(){
				this.$refs.ipt.disable=true;
			}
		},
		mounted() {
			this.axios.get('/detailmovie?movieId=' + this.movieId).then(res => {
				
				if (res.status == 200) {
					this.movie = res.data.detailMovie
					this.isLoading = false
				}
			})
			
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.$swiper
			}
		},
		components: {
			Header
		}
	}
</script>

<style scoped>
	#detailContainer {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
		width: 100%;
		min-height: 100%;
		background-color: white;
	}

	#detailContainer.slide {
		animation: slide .3s;
	}

	@keyframes slide {
		from {
			transform: translateX(100%);
		}

		to {
			transform: translateX(0%);
		}
	}

	#detailContainer .back {
		display: block;
		width: 35px;
		height: 100%;
		text-align: center;
		line-height: 51px;
		position: absolute;
		left: 0px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 16px;
	}

	#content.contentDetail {
		display: block;
		margin-bottom: 0;
	}

	#content .detail_list {
		height: 200px;
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.detail_list .detail_list_bg {
		width: 100%;
		height: 100%;
		/* background: url(../images/movie_1.jpg) 0 40%; */
		filter: blur(20px);
		background-size: cover;
		position: absolute;
		left: 0;
		top: 0;
	}

	.detail_list .detail_list_filter {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #40454d;
		opacity: .55;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.detail_list .detail_list_content {
		display: flex;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
	}

	.detail_list .detail_list_img {
		width: 108px;
		height: 150px;
		border: solid 1px #f0f2f3;
		margin: 20px;
	}

	.detail_list .detail_list_img img {
		width: 100%;
		height: 100%;
	}

	.detail_list .detail_list_info {
		margin-top: 20px;
	}

	.detail_list .detail_list_info h2 {
		font-size: 20px;
		color: white;
		font-weight: normal;
		line-height: 40px;
	}

	.detail_list .detail_list_info p {
		color: white;
		line-height: 20px;
		font-size: 14px;
		color: #ccc;
	}

	#content .detail_intro {
		padding: 10px;
	}

	#content .detail_player {
		margin: 20px;
	}

	.detail_player .swiper-slide {
		width: 70px;
		margin-right: 20px;
		text-align: center;
		font-size: 14px;
	}

	.detail_player .swiper-slide img {
		width: 100%;
		margin-bottom: 5px;
	}

	.detail_player .swiper-slide p:nth-of-type(2) {
		color: #999;
	}
</style>
